<template>
  <!-- 业绩提成-提成单详情 主组件 -->
  <zm-panel
    title="提成单详情"
    :visible.sync="value"
    class="panelContainer"
    :show-footer="false"
    :before-close="onCancel"
  >
    <zm-tabs v-model="active">
      <el-tab-pane label="概况信息" name="first">
        <!-- 业绩提成-提成单详情-概况信息 -->
        <div class="ProfileInformation">
          <zm-form :model="infoObj" inline size="small">
            <div class="ProfileInformation-headInfo">
              <p class="ProfileInformation-headInfo_clues">{{clues}}</p>
              <div v-if="infoObj.status === '1' && tabChange === 'first'" class="fr">
                <zm-button
                  @click="ResultsAppeal"
                  size="medium"
                  >
                  业绩申诉
                </zm-button>
                <zm-button
                  @click="ResultsConfirmBtn"
                  size="medium"
                  >
                  业绩确认
                </zm-button>
              </div>
              <zm-button class="fr"
                @click="CancelComplaint"
                size="medium"
                v-if="infoObj.status === '3' && tabChange === 'first'"
                >
                撤销申诉
              </zm-button>
            </div>
            <h4>基本信息</h4>
            <basic-information :info-obj="infoObj"></basic-information>
            <h4>回款详情</h4>
            <receivable-detail v-if="infoObj.salemanId" :month="detailInfo.month" :info-obj="infoObj"></receivable-detail>
          </zm-form>
          <!-- 按钮弹窗组件 -->
          <confirmation-pop
            v-if="visible"
            :params="params"
            @onCancel="popCancel"
            @closeDetailDialog="backHome"
            :type="type"
          ></confirmation-pop>
        </div>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="second">
        <operation-log :performance-id="detailInfo.performanceId"></operation-log>
      </el-tab-pane>
    </zm-tabs>
</zm-panel>
</template>

<script>
import { getInfo } from '@/api/src/salesmanCommission'
import panelMixin from '@/mixins/panelMixin'
import OperationLog from './operationLog/index.vue'
import BasicInformation from './profileInformation/BasicInformation.vue'
import ReceivableDetail from './profileInformation/ReceivableDetail.vue'
import ConfirmationPop from './profileInformation/ConfirmationPop.vue'
import tableMixin from '@/mixins/zmTableMixin'
export default {
  components: { OperationLog, BasicInformation, ConfirmationPop, ReceivableDetail },
  mixins: [panelMixin, tableMixin],
  props: {
    detailInfo: {
      type: Object,
      required: true
    },
    tabChange: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      active: 'first',
      infoObj: {},
      visible: false,
      type: '' // 业绩申诉/业绩确认
    }
  },
  computed: {
    params () {
      return {visible: this.visible, obj: this.infoObj, month: this.detailInfo.month}
    },
    clues () {
      return this.infoObj.status === '0' ? '请等待财务进行业绩提成核算，核算完成后可查看最终业绩提成。'
        : this.infoObj.status === '1' ? '如对业绩存在疑问可发起申诉，申诉通过后会进行核发提成的修正。'
          : this.infoObj.status === '2' ? '业绩单已确认，财务将按照确认业绩进行发放！'
            : this.infoObj.status === '3' ? '业绩单已确认，财务将按照确认业绩进行发放！' : ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getDetailInfo()
    },
    onCancel () {
      this.$emit('onCancel', false)
    },
    async getDetailInfo () {
      this.infoObj = await getInfo(this.detailInfo)
    },
    popCancel (val) {
      this.visible = val
    },
    // 业绩确认按钮
    ResultsConfirmBtn () {
      this.visible = true
      this.type = '业绩确认'
    },
    // 业绩申诉按钮
    ResultsAppeal () {
      this.visible = true
      this.type = '业绩申诉'
    },
    // 撤销申诉
    CancelComplaint () {
      this.visible = true
      this.type = '撤销申诉'
    },
    backHome () {
      this.onCancel()
      this.$emit('refreshPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.ProfileInformation{
  .ProfileInformation-headInfo{
    height: 70px;
    width: 100%;
    padding: 15px 30px;
    background-color: #f2f2f2;
    .ProfileInformation-headInfo_clues{
      float: left;
      line-height: 40px;
      color:#f5a742
    }
  }
}
</style>
